$appColor : green;
$mybw : 3px;


div{
	color:$appColor;
	border:$mybw red solid;
}
p{
	color:$appColor;
	border:$mybw red solid;
}

$mycolor:red;
a{
	color:$mycolor;
}
span{
	color:$mycolor;
}


$myh : 100px;

div{
	$myh : 50px !global;
	height:$myh;
}

p{
	height:$myh;
}

// 原始形式
.div1 .div2 .div3 .div4 p{color:red}
.div1 .div2 p{color:red}
.div1 .div2 .div3 img{color:red}
.div1 .div21{color:red}

//选择器嵌套-解决你的痛点-让你从此幸福
// 每一个标签，都有一个唯一属于他的位置，我们不用考虑层级问题。
.div1{
	color:red;
	.div2{
		color:red;
		.div3{
			color:red;
			.div4{
				color:red;
				p:nth-child(1){
					color:red;
					a{
						color:red;
					}
				}
				p:nth-child(2){
					color:red;
				}
			}
			img{
				color:red;
			}
		}
		p{
				color:red;
		}
	}
	.div21{
		color:red;
	}
}

//原始css写法
.div1{
	font-size:13px;
	font-weight: bold;
	font-family: 楷体;
	font-style: italic;
}
//属性的嵌套-升级写法
.div1{
	font:{
		size:13px;
		weight: bold;
		family: 楷体;
		style: italic;
	}
	height:300px;
	background:{
		color:blue;
		image:url();
		position:10 20;
	}
}

@import  './constant.scss';
div{
	color:$mytheme;
}


@mixin mingzi($c1,$url) {
	color:red;
	width:100px;
	background:$url;
	border:2px solid red;
	font-size:$c1;
}

.div1{
	@include mingzi(10px,(url(),url()));
}

.div2{
	@include mingzi(20px,url());
}


.div1{
	color:red;
	font-size:12px;
}
.div3{
	magin:10px;
	padding:10px;
}
.div2{
	@extend .div1;
	@extend .div3;
	width:10px;
}

$is : false;
$mysize : 10px;
div{
	@if ($is) {
		$mysize:14px !global;
	}
	@else{
		$mysize:24px !global;
	}
	font-size:$mysize;
}


@for $i from 1 to 10 {
	.div-#{$i}{
		font-size:10px;
	}
}








